<template>
  <!--系统主体结构-->
  <div class="main">
    <div class="main-content">
      <div class="memu-nav">
        <img v-if="versionType === 'jiaokong'" class="logo" src="../assets/image/logo.png" alt="" />
        <img
          v-if="versionType === 'nanning'"
          class="logo"
          src="../assets/image/nanning-logo.png"
          alt=""
        />
        <!-- <div class="menuTitle">天津轨道交通信号智能运维监视中心</div> -->
        <el-menu
          class="el-menu-nav"
          mode="vertical"
          :default-active="defaultActive"
          @open="handleOpen"
          @close="handleClose"
        >
          <!-- 一级菜单 -->
          <template v-for="item in menuData">
            <el-submenu
              :key="item.permissionId + ''"
              :index="item.permissionId + ''"
              popper-class="subdiv"
              v-if="
                item.showList.includes(
                  $store.state.user.groups[0] ? $store.state.user.groups[0].name : '游客',
                )
              "
            >
              <template v-slot:title>
                <div
                  class="menu-div"
                  :class="{
                    'menu-div-active': defaultDivActive == item.permissionId,
                  }"
                  @click="selectItems('/main/' + item.name, item)"
                >
                  <i :class="`el-icon-${item.icon}`"></i>
                  <!-- <i class="iconfont" :class="'icon-' + item.name"></i> -->
                  <span class="memu-label">{{ item.label }}</span>
                </div>
              </template>
              <!-- 二级菜单 -->
              <template v-for="itemChild in item.children">
                <el-submenu
                  v-if="itemChild.children && itemChild.children.length"
                  :key="itemChild.permissionId + ''"
                  :index="itemChild.permissionId + ''"
                  popper-class="subdiv"
                  class="subbox"
                >
                  <template v-slot:title>
                    <div @click="selectItems('/main/' + itemChild.name, itemChild)">
                      <span class="memu-label">{{ itemChild.label }}</span>
                    </div></template
                  >

                  <!-- 三级菜单 -->
                  <el-menu-item
                    class="subbox"
                    v-for="itemChild_Child in itemChild.children"
                    :index="itemChild_Child.permissionId + ''"
                    :key="itemChild_Child.permissionId + ''"
                    @click="selectItems('/main/' + itemChild_Child.name)"
                  >
                    <template #title>
                      <span>{{ itemChild_Child.label }}</span>
                    </template>
                  </el-menu-item>
                </el-submenu>

                <el-menu-item
                  class="subbox"
                  v-else
                  :index="itemChild.permissionId + ''"
                  :key="itemChild.permissionId + ''"
                  @click="selectItems('/main/' + itemChild.name)"
                >
                  <template #title>
                    <span>{{ itemChild.label }}</span>
                  </template>
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
        </el-menu>
        <div class="bottom-btn-line">
          <el-button class="bottom-btn" @click="selectItems('/main/role')">个人信息</el-button>
        </div>
      </div>
      <main-content class="mainContent"></main-content>
    </div>
  </div>
</template>

<script>
import mainContent from '@/pages/mainContent.vue';
import { mapState, mapMutations } from 'vuex';

import { getData, getIsimData } from '@/service/getData';

export default {
  components: {
    mainContent,
  },
  data() {
    return {
      versionType: process.env.VUE_APP_BASE_API,
      defaultActive: '', // 选中菜单index
      defaultDivActive: '1',
      menuData: [
        {
          applicationId: 1,
          children: [],
          label: process.env.VUE_APP_BASE_API === 'nanning' ? '宁仔小助手' : '对话',
          name: 'chat',
          icon: 'chat-dot-round',
          parentId: '99',
          permissionId: '99.1',
          permissionType: '1',
          showList: ['超级管理员', '管理员', '普通用户', '游客'],
        },
        {
          applicationId: 3,
          children: [],
          label: '智能体',
          name: 'intelligent',
          parentId: '99',
          icon: 'orange',
          permissionId: '99.3',
          permissionType: '3',
          showList: ['超级管理员', '管理员', '普通用户'],
        },
        {
          applicationId: 2,
          children: [],
          label: '知识库',
          name: 'upload',
          parentId: '99',
          icon: 'upload',
          permissionId: '99.2',
          permissionType: '2',
          showList: ['超级管理员', '管理员', '普通用户'],
        },
        {
          applicationId: 4,
          children: [],
          label: '问答管理',
          name: 'answer',
          parentId: '99',
          icon: 'edit',
          permissionId: '99.4',
          permissionType: '4',
          showList: ['超级管理员', '管理员', '普通用户'],
        },
        {
          applicationId: 5,
          children: [],
          label: '反馈记录',
          name: 'errorlist',
          parentId: '99',
          icon: 's-operation',
          permissionId: '99.5',
          permissionType: '5',
          showList: ['超级管理员'],
        },
        {
          applicationId: 6,
          children: [],
          label: '过滤管理',
          name: 'filter',
          parentId: '99',
          icon: 's-operation',
          permissionId: '99.6',
          permissionType: '6',
          showList: ['超级管理员', '管理员'],
        },
        {
          applicationId: 7,
          children: [],
          label: '专业知识系统',
          name: 'knowledge',
          parentId: '99',
          icon: 's-operation',
          permissionId: '99.7',
          permissionType: '7',
          showList: ['超级管理员'],
        },
      ],

      weekDay: '',
      yeardate: '',
      timedate: '',
    };
  },
  async created() {},
  deactivated() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.pagetimer) {
      clearInterval(this.pagetimer);
    }
  },
  activated() {
    let fullPath = this.$route.fullPath;
    let keyPath = fullPath;
    this.selectItems(keyPath);
  },
  mounted() {
    // this.init();
  },
  computed: {},
  watch: {
    $route: function (to, from) {
      let _this = this;
      // 设置当前选中菜单
      let fullPath = to.fullPath;
      if (fullPath.indexOf('main') > -1) {
        let keyPath = fullPath;
        _this.selectItems(keyPath, undefined, to.query.type);
      } else {
        return false;
      }
    },
  },

  beforeDestroy() {
    this.$EventBus.$off('openDialogCommon');
    this.$EventBus.$off('openAlarmDetailDialog');
    this.$EventBus.$off('openPreAlarmDetailDialog');
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.pagetimer) {
      clearInterval(this.pagetimer);
    }
  },
  methods: {
    // 在刷新页面时，根据当前路由激活当前的选中状态，避免每次刷新都在菜单第一个
    selectIndex(keyPath) {
      // debugger
      console.log('selectIndex', keyPath);
      //   debugger
      if (keyPath) {
        let pathName_1 = keyPath.split('/main/')[1];
        if (pathName_1) {
          let pathName = pathName_1.indexOf('?') > -1 ? pathName_1.split('?')[0] : pathName_1; // 在push页面路径的时候，加了type用于区分菜单menu还是tab页签
          this.menuData.forEach((item) => {
            if (item.children && item.children.length > 0) {
              item.children.forEach((items) => {
                if (items.name === pathName) {
                  this.defaultActive = items.permissionId + '';
                  this.defaultDivActive = item.permissionId + '';
                }
                if (items.children && items.children.length > 0) {
                  items.children.forEach((ite) => {
                    if (ite.name === pathName) {
                      this.defaultActive = ite.permissionId + '';
                      this.defaultDivActive = item.permissionId + '';
                    }
                  });
                }
              });
            } else {
              if (item.name === pathName) {
                this.defaultActive = item.permissionId + '';
                this.defaultDivActive = item.permissionId + '';
              }
            }
          });
        }
      }
    },

    // 点击子菜单 跳转路由等处理
    selectItems(keyPath, item, type = '') {
      if (keyPath) {
        console.log('keyPath', keyPath);
        if (keyPath.indexOf('deviceAccount') > -1) {
          this.$store.state.isDeviceMenu = true;
        }
        if (item && item.children && item.children.length > 0) {
          // 代表一级菜单有子级，当前一级菜单不用跳转
        } else {
          this.selectIndex(keyPath);
          this.$router.push({ path: keyPath });
          // this.$router.push(keyPath) // 点击菜单页面路由跳转
        }
      }
    },

    // 菜单打开事件
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },

    // 菜单收起事件
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>
<style scoped></style>
<!--Add "scoped" attribute to limit CSS to this component only-->
<style lang="scss">
.user-item {
  background-color: #364c8573;
  border: 1px solid #233999;
  margin-left: 10px;
  padding: 10px;
  border-radius: 4px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
}
.memu-nav {
  position: relative;
}
.bottom-btn-line {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  position: absolute;
  bottom: 20px;
  left: 0;
}
.bottom-btn {
  width: 100%;
}
.logo {
  width: 160px;
  background-color: #fff;
  margin: 10px auto 20px;
  display: block;
}
</style>
